<template>
  <el-container>
    <el-header>
      <div>
        <img src="../assets/timg.jpg" alt class="logo" />
        <span>新零售商户管理后台</span>
      </div>
      <el-button type="info" @click="logout" class="loginOut">退出</el-button>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="iscollapse ? '64px' : '200px'">
        <div class="foldMenu" @click="fold">|||</div>
        <!-- unique-opened用于只保持一个子菜单的展开 collapse用于折叠菜单 collapse-transition用于关闭折叠动画 default-active用于根据index值进行点击高亮 router用于根据index值进行页码跳转 -->
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
          unique-opened
          :collapse="iscollapse"
          :collapse-transition="false"
          router
          :default-active="isActive"
        >
          <!-- 一级菜单(我的店铺) -->
          <el-submenu index="1">
            <!-- 一级菜单区域 -->
            <template slot="title">
              <i class="iconfont icon-user"></i>
              <span>我的店铺</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item index="/info" @click="saveNavState('/info')">
              <i class="el-icon-menu"></i>
              店铺基本信息
            </el-menu-item>
            <el-menu-item index="/style" @click="saveNavState('/style')">
              <i class="el-icon-menu"></i>
              店铺风格管理
            </el-menu-item>
            <el-menu-item index="/right" @click="saveNavState('/right')">
              <i class="el-icon-menu"></i>
              店铺权益
            </el-menu-item>
          </el-submenu>
          <!-- 一级菜单(商品管理) -->
          <el-submenu index="2">
            <!-- 一级菜单区域 -->
            <template slot="title">
              <i class="iconfont icon-tijikongjian"></i>
              <span>商品管理</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item index="/preferential" @click="saveNavState('/preferential')">
              <i class="el-icon-menu"></i>
              优惠券管理
            </el-menu-item>
            <el-menu-item index="/activity" @click="saveNavState('/activity')">
              <i class="el-icon-menu"></i>
              活动设置
            </el-menu-item>
            <el-menu-item index="/list" @click="saveNavState('/list')">
              <i class="el-icon-menu"></i>
              商品列表
            </el-menu-item>
            <el-menu-item index="/cate" @click="saveNavState('/cate')">
              <i class="el-icon-menu"></i>
              商品分类
            </el-menu-item>
          </el-submenu>
          <!-- 一级菜单(订单管理) -->
          <el-submenu index="3">
            <!-- 一级菜单区域 -->
            <template slot="title">
              <i class="iconfont icon-shangpin"></i>
              <span>订单管理</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item index="/order" @click="saveNavState('/order')">
              <i class="el-icon-menu"></i>
              订单列表
            </el-menu-item>
          </el-submenu>
          <!-- 一级菜单(财务管理) -->
          <el-submenu index="4">
            <!-- 一级菜单区域 -->
            <template slot="title">
              <i class="iconfont icon-danju"></i>
              <span>财务管理</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item index="/shopAccount" @click="saveNavState('/shopAccount')">
              <i class="el-icon-menu"></i>
              店铺账户
            </el-menu-item>
            <el-menu-item index="/account" @click="saveNavState('/account')">
              <i class="el-icon-menu"></i>
              账户明细
            </el-menu-item>
          </el-submenu>
          <!-- 一级菜单(素材库管理) -->
          <el-submenu index="5">
            <!-- 一级菜单区域 -->
            <template slot="title">
              <i class="iconfont icon-baobiao"></i>
              <span>素材管理</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item index="/material" @click="saveNavState('/material')">
              <i class="el-icon-menu"></i>
              我的素材库
            </el-menu-item>
            <el-menu-item index="/goods" @click="saveNavState('/goods')">
              <i class="el-icon-menu"></i>
              素材商城
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主体内容 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      iscollapse: false,
      isActive: ''
    }
  },
  created () {
    // 页面一加载就赋值
    this.isActive = window.sessionStorage.getItem('active')
  },
  methods: {
    // 退出功能
    logout() {
      this.$router.push('/')
    },
    // 菜单折叠
    fold () {
      this.iscollapse = !this.iscollapse
    },
    // 点击二级菜单高亮
    saveNavState (active) {
      // 保存状态
      window.sessionStorage.setItem('active', active)
      this.isActive = active
    }
  }
}
</script>

<style scoped lang="less">
.el-container {
  height: 100%;
}
.logo {
  width: 61px;
  height: 56px;
  border-radius: 50%;
}
.el-submenu {
  span {
    margin-left: 10px;
  }
}
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #373d41;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
      font-size: 25px;
      color: #fff;
    }
  }
}
.el-aside {
  background-color: #333744;
}
.el-main {
  background-color: #eaedf1;
}
.el-menu {
  border-right: 0;
}
.el-menu-item{
  font-size: 16px;
}
.foldMenu {
  height: 32px;
  background-color: #4a5064;
  line-height: 32px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>
